<!DOCTYPE html>
<html lang="en">
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
      name="viewport">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta charset="UTF-8">
<title>区域意向客户列表new</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="/dist/css/oa-app.css">
<head>

</head>
<style>
    .lineOne, .lineTwo {
        text-align: left;
    }
    .lineOne span {
        max-height: 24px;
        line-height: 24px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1;
        text-align: left;
    }
    .div-td-content-more {
        position: absolute;
        height: auto;
        z-index: 999;
        line-height: 20px;
        background-color: #d3e8fd;
        padding: 8px 6px;
        border: 1px solid #e8e8ea;
        display: none;
    }
    .div-td-content-more i {
        width: 15px;
        height: 12px;
        /* background: url("/dist/img/more-icon.png");*/
        position: absolute;
        left: 50px;
        top: -12px;
    }
    .hidden {
        display: none;
    }
    .model-picker-dropdown {
        position: absolute;
        width: 315px;
        left: -9999px;
        top: -9999px;
        outline: 0;
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
        z-index: 999999;
        display: none;
        min-width: 200px;
        margin-bottom: 20px;
        margin-top: 5px
    }

    .model-select-wrap {
        box-shadow: 0 1px 5px rgba(0, 0, 0, 0.5)
    }

    .model-select-tab {
        border-bottom: 1px solid #ccc;
        background: #f5f5f5;
        font-size: 13px
    }

    .model-select-tab > a {
        display: inline-block;
        padding: 4px 20px;
        border-left: 1px solid #ccc;
        border-bottom: 1px solid transparent;
        color: #4D4D4D;
        text-align: center;
        outline: 0;
        text-decoration: none;
        cursor: pointer;
        font-size: 14px;
        margin-bottom: -1px
    }

    .model-select-tab > a.active {
        background: #fff;
        border-bottom: 1px solid #fff;
        color: #46A4FF
    }

    .model-select-tab > a:first-child {
        border-left: none
    }

    .model-select-tab > a:last-child.active {
        border-right: 1px solid #ccc
    }

    .model-select-content {
        width: 100%;
        min-height: 50px;
        background-color: #fff;
        padding: 5px 5px
    }

    .model-select {
        font-size: 12px
    }

    .model-select dl {
        line-height: 2;
        clear: both;
        padding: 3px 0;
        margin: 0;
        max-height: 200px;
        overflow-y: scroll
    }

    .model-select dt {
        position: absolute;
        width: 2.5em;
        font-weight: 500;
        text-align: right;
        line-height: 2
    }

    .model-select dd {
        margin-left: 0;
        line-height: 2
    }

    .model-select.province dd {
        margin-left: 3em
    }

    .model-select a {
        display: inline-block;
        padding: 0 10px;
        outline: 0;
        white-space: nowrap;
        margin-right: 2px;
        text-decoration: none;
        color: #333;
        cursor: pointer
    }

    .model-select a:hover, .model-select a:focus {
        background-color: #f1f8ff;
        border-radius: 2px;
        color: #46A4FF
    }

    .model-select a.active {
        background-color: #46A4FF;
        color: #fff;
        border-radius: 2px
    }
</style>
<body>
<div id="app" v-cloak>
    <div class="div-td-content-more" style="z-index: 11112"><i></i></div>
    <table class="oa-table " >
        <thead>
        <tr class="oa-table-title-gray">
            <th style="width:45px;">客户</th>
            <th style="width: 85px">电话</th>
            <th style="width:60px;line-height:16px; ">意向<br>品牌</th>
            <th style="width: 60px;line-height:16px;">意向<br>机型</th>
            <th style="width: 45px;line-height:16px;">成交<br>时间</th>
            <th style="width: 40px;line-height:16px;">成交<br>概率</th>
        </tr>
        </thead>

    </table>
    <table class="oa-table">
        <tbody>
        <tr v-for="(item,i) in list" >

            <td style="color: #2a8cec;width:45px;border-top: none" @click="openDetail(item.customerId,0,'edit')">
                <div class="oa-name" >{{item.customerName}}</div>
            </td>
            <td style="color: #2a8cec;width: 85px;border-top: none" @click="openTel(item)">{{item.customerTel}}</td>
            <td style="width:60px;border-top: none">{{item.intentionBrand}}</td>
            <td class="lineOne" style="width:60px;border-top: none">
                <span style="text-align: center;">{{item.intentionModel.substring(0,item.intentionModel.length>7?6:item.intentionModel.length)}}</span>
            </td>
            <td style="width: 45px;border-top: none">{{item.buyDate}}</td>
            <td style="width: 40px;border-top: none">{{item.chance}}</td>
        </tr>
        </tbody>
    </table>
    <div class="oa-footer-btn" style="" @click="openDetail('',1,'edit')">新增意向客户</div>


</div>
<script src="https://file.ggxqce.com/web/jquery-2.2.3.min.js"></script>
<script src="https://file.ggxqce.com/web/vue.min.js"></script>
<script src="https://file.ggxqce.com/web/axios.min.js"></script>
<script src="/dist/js/newOaApp.js"></script>
<script>
    $(function () {
        $("body").on("click", ".lineOne,.lineTwo", function (e) {
            if ($(".div-td-content-more").is(":hidden")) {
                var text = $(this).text();
                if (text != "") {
                    text = "<i></i>" + text;
                    $(".div-td-content-more").html(text).css({
                        "width": $(this).outerWidth() + "px",
                        "left": $(this).offset().left,
                        "top": ($(this).offset().top + $(this).outerHeight()) + "px"
                    }).show();
                    e.stopPropagation();
                }
            } else {
                $(".div-td-content-more").hide();
            }
        });
        $("body").on("click", ".div-td-content-more", function (e) {
            e.stopPropagation();
        });
        $("body").on("click", function () {
            $(".div-td-content-more").hide();
        });
    });
</script>
<script>
    //navigateBack回调
    function onParamReceived(param) {
        if (param) {
            app.get_customerList_regionManager();
        }
    }

</script>
<script type="text/javascript">
    var app = new Vue({
        el: '#app',
        data: {
            userId: getUrlParamObj().userId,
            userInfo: {},
            dateTime: '2019',
            key: '',
            regionAuditFlag: '0',
            currentMonth: new Date().Format("M"),
            list: [],
            info: [],
            returnFlag: false,
            isAdd: getUrlParamObj().isAdd
        },
        methods: {
            changeBuyDate:function(buyDate){
                var a='';
                alert(buyDate)
                switch (buyDate) {
                    case 'todayMonth':
                        a='本月内'
                        break
                    case 'nextMonth':
                        a='下月内'
                        break
                    case 'threeMonth':
                        a='三月内'
                        break
                    case 'halfYear':
                        a='半年内'
                        break
                }
                return a;
            },
            get_customerList_regionManager: function () {
                var that = this;
                var obj = {
                    dialog: 'show'
                }
                prompt(JSON.stringify(obj))
                axios.post(urlConfig.intentionCustomerManagement.getCustomerListByCreateUserId,  {
                    "userId": that.userId,
                    "buyDate": '',
                    "key": ''
                })
                    .then(function (data) {
                        console.log(data.records)
                        that.list = data.records;
                        console.log(that.list)
                        var obj = {
                            dialog: 'hidden'
                        }
                        prompt(JSON.stringify(obj))
                        that.returnFlag = true;
                        JSBridge.call(UI, 'hideLoading')
                    })

            },
            isUnDone: function (item) {
                if (
                    (
                        item.customerName == "" ||
                        item.customerTel == "" ||
                        item.customerType == "" ||
                        item.customerCredit == "" ||
                        item.source == "" ||
                        item.chance == "" ||
                        item.countyName == "" ||
                        item.intentionBrand == "" ||
                        item.intentionModel == "" ||
                        item.existingDevice == "" ||
                        item.buyDate == "" ||
                        item.workingExperience == "" ||
                        item.buildCondition == "" ||
                        item.revenueForecast == "" ||
                        item.competitorCondition == ""||
                        item.updateTime != new Date().Format("yyyy-MM-dd")
                    )
                ) {
                    return true
                } else {
                    return false
                }
            },
            openTel: function (item) {
                var that = this;
                var param = {
                    phoneNumber:  item.customerTel,
                    isTelVisit: true, //true跳转到电访页面  false跳转到系统拨号页面,
                    name: item.customerName  //客户姓名 isTelVisit=true时,选传参数
                }
                JSBridge.call(DEVICE, 'makePhoneCall', param)

            },
            //打开客户详情
            openDetail: function (customerId, isAdd, pageType) {
                var that = this;
                var param = {
                    url:'/page/intentionManagement/quYuIntentionalDetailApp.html?customerId=' + customerId + '&isAdd=' + isAdd + '&pageType=' + pageType + '&userId=' + that.userId + '&companyId=' + that.userInfo.companyId + '&isRegion=1&newPager=1',
                }
                JSBridge.call(ROUTER, 'navigateTo', param)
            },
            setPullRefresh: function(isOpen) {
                var param = {
                    pullRefresh: isOpen, //是否开启原生下拉刷新
                }
                JSBridge.call(UI, 'setPullRefresh', param)
            }
        },
        mounted: function () {
            var that=this;
            axios.post(urlConfig.system.user.getUserViewById,  {
                id: that.userId
            })
                .then(function (r) {
                    /*JSBridge.call(UI, 'hideLoading')*/
                    that.userInfo = r;
                    console.log(that.userInfo.companyId)
                })
            that.get_customerList_regionManager();
            that.setPullRefresh(true);

        }
    })
</script>
<script>
    var isTop = true
    $(window).scroll(function () {
        //为了保证兼容性，这里取两个值，哪个有值取哪一个,scrollTop就是触发滚轮事件时滚轮的高度
        var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
        if (scrollTop === 0) {
            isTop = true
            setScrollTop(true) //到达顶部
        } else if (scrollTop > 0 && isTop) {
            isTop = false
            setScrollTop(false) //非顶部
        }
    })
    function setScrollTop (isScrollTop) {
        var param = {
            isScrollTop: isScrollTop
        }
        JSBridge.call(UI, 'setScrollTop', param)
    }

</script>
</body>
</html>